<template>
	<view class="cart-container">
		<!-- 购物车头部 -->
		<view class="cart-header">
			<view class="filter-buttons">
				<view class="filter-btn" :class="{active: selectedFilter === 'all'}" @click="changeFilter('all')">全部
				</view>
				<view class="filter-btn" :class="{active: selectedFilter === 'takeaway'}"
					@click="changeFilter('takeaway')">到店自取</view>
				<view class="filter-btn" :class="{active: selectedFilter === 'dinein'}" @click="changeFilter('dinein')">
					堂食</view>
				<view class="filter-btn" :class="{active: selectedFilter === 'delivery'}"
					@click="changeFilter('delivery')">外送到家</view>
			</view>
			<text class="header-edit" @click="toggleEdit">{{isEditing ? '完成' : '编辑'}}</text>
		</view>

		<!-- 购物车列表 -->
		<scroll-view class="cart-scroll" scroll-y>
			<view class="cart-list">
				<view class="cart-item" v-for="(item, index) in cartItems" :key="item.id">
					<view class="item-select" @click="toggleSelect(index)">
						<text class="select-icon" :class="{selected: item.selected}">✓</text>
					</view>
					<image class="item-image" :src="item.image" mode="aspectFill"
						@click="navigateToProductDetail(item.id)"></image>
					<view class="item-info">
						<text class="item-name">{{item.name}}</text>
						<text class="item-desc">{{item.description}}</text>
						<view class="item-bottom">
							<text class="item-price">¥{{item.price}}</text>
							<view class="quantity-control">
								<text class="quantity-btn" @click="decreaseQuantity(index)">-</text>
								<text class="quantity-number">{{item.quantity}}</text>
								<text class="quantity-btn" @click="increaseQuantity(index)">+</text>
							</view>
						</view>
					</view>
					<view class="item-delete" v-if="isEditing" @click="deleteItem(index)">
						<text>删除</text>
					</view>
				</view>
			</view>

			<!-- 空购物车状态 -->
			<view class="recommended-section">
				<text class="section-title">你可能还喜欢</text>
				<view class="recommended-list">
					<view class="recommended-item" v-for="item in recommendedItems" :key="item.id">
						<image class="recommended-image" :src="item.image" mode="widthFix"
							@click="navigateToProductDetail(item.id)"></image>
						<text class="recommended-name">{{item.name}}</text>
						<text class="recommended-price">¥{{item.price}}</text>
						<button class="add-to-cart-btn" @click="addToCart(item)">加入购物车</button>
					</view>
				</view>
			</view>


			<view class="empty-cart" v-if="cartItems.length === 0">
				<image class="empty-icon" src="/static/cart/empty.png" mode="aspectFit"></image>
				<text class="empty-text">购物车空空如也</text>
				<button class="empty-btn" @click="navigateToOrder">去逛逛</button>
			</view>
		</scroll-view>

		<!-- 购物车底部 -->
		<view class="cart-footer" v-if="cartItems.length > 0">
			<view class="footer-left">
				<view class="select-all" @click="toggleSelectAll">
					<text class="select-icon" :class="{selected: isAllSelected}">✓</text>
					<text class="select-text">全选</text>
				</view>
			</view>
			<view class="footer-right">
				<view class="total-info">
					<text class="total-text">合计：</text>
					<text class="total-price">¥{{selectedTotal}}</text>
				</view>
				<button class="submit-btn" @click="submitOrder">{{isEditing ? '删除选中' : '去结算'}}</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 购物车数据
	const filterOptions = ['all', 'takeaway', 'dinein', 'delivery']
	const selectedFilter = ref('all')

	const cartItems = ref([{
			id: 1,
			name: '经典奶茶',
			description: '醇香浓郁',
			price: 15.00,
			image: '/static/goods/goods01.jpg',
			quantity: 2,
			selected: true
		},
		{
			id: 2,
			name: '拿铁咖啡',
			description: '香醇顺滑',
			price: 22.00,
			image: '/static/goods/goods02.jpg',
			quantity: 1,
			selected: true
		}
	])

	const isEditing = ref(false)

	// 计算属性
	const isAllSelected = computed(() => {
		return cartItems.value.length > 0 && cartItems.value.every(item => item.selected)
	})

	const selectedTotal = computed(() => {
		return cartItems.value
			.filter(item => item.selected)
			.reduce((total, item) => total + (item.price * item.quantity), 0)
			.toFixed(2)
	})

	const selectedCount = computed(() => {
		return cartItems.value.filter(item => item.selected).length
	})

	const changeFilter = (filter) => {
		selectedFilter.value = filter
	}

	// 推荐商品数据
	const recommendedItems = ref([{
			id: 101,
			name: '草莓奶茶',
			price: 18.00,
			image: '/static/goods/goods03.jpg'
		},
		{
			id: 102,
			name: '巧克力蛋糕',
			price: 28.00,
			image: '/static/goods/goods04.jpg'
		},
		{
			id: 103,
			name: '蓝莓冰淇淋',
			price: 22.00,
			image: '/static/goods/goods05.jpg'
		},
		{
			id: 104,
			name: '柠檬气泡水',
			price: 15.00,
			image: '/static/goods/goods06.jpg'
		}
	])

	const addToCart = (item) => {
		// 检查商品是否已在购物车中
		const existingItem = cartItems.value.find(cartItem => cartItem.id === item.id)
		if (existingItem) {
			existingItem.quantity++
		} else {
			cartItems.value.push({
				...item,
				quantity: 1,
				selected: true,
				description: '推荐商品'
			})
		}
		uni.showToast({
			title: '已添加到购物车',
			icon: 'success'
		})
	}

	// 方法
	const toggleEdit = () => {
		isEditing.value = !isEditing.value
	}

	const toggleSelect = (index) => {
		cartItems.value[index].selected = !cartItems.value[index].selected
	}

	const toggleSelectAll = () => {
		const newSelectedState = !isAllSelected.value
		cartItems.value.forEach(item => {
			item.selected = newSelectedState
		})
	}

	const increaseQuantity = (index) => {
		cartItems.value[index].quantity++
	}

	const decreaseQuantity = (index) => {
		if (cartItems.value[index].quantity > 1) {
			cartItems.value[index].quantity--
		}
	}

	const deleteItem = (index) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这个商品吗？',
			success: (res) => {
				if (res.confirm) {
					cartItems.value.splice(index, 1)
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
				}
			}
		})
	}

	const submitOrder = () => {
		if (isEditing.value) {
			// 删除选中商品
			const selectedIndexes = []
			cartItems.value.forEach((item, index) => {
				if (item.selected) {
					selectedIndexes.unshift(index) // 从后往前删除
				}
			})

			selectedIndexes.forEach(index => {
				cartItems.value.splice(index, 1)
			})

			if (selectedIndexes.length > 0) {
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		} else {
			// 去结算
			if (selectedCount.value === 0) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				})
				return
			}

			uni.navigateTo({
				url: '/pages_shopcar/submitOrder/index'
			})
		}
	}

	const navigateToOrder = () => {
		uni.switchTab({
			url: '/pages/order/index'
		})
	}

	const navigateToProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages_order/orderInfo/index?id=${id}`
		})
	}

	onLoad(() => {
		console.log('购物车页面加载')
	})
</script>

<style scoped>
	.cart-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	/* 购物车头部 */
	.cart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: white;
		border-bottom: 1rpx solid #eee;
	}

	.filter-buttons {
		display: flex;
		margin: 0 20rpx;
	}

	.filter-btn {
		padding: 15rpx 30rpx;
		margin: 0 5rpx;
		background-color: #f1f2ed;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #333;
	}

	.filter-btn.active {
		background-color: #ff6b6b;
		color: white;
	}

	.header-edit {
		font-size: 28rpx;
		color: #666;
	}

	/* 购物车滚动区域 */
	.cart-scroll {
		height: calc(100vh - 200rpx);
	}

	.cart-list {
		padding: 20rpx;
	}

	/* 购物车项 */
	.cart-item {
		display: flex;
		align-items: center;
		background: white;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.item-select {
		margin-right: 20rpx;
	}

	.select-icon {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: transparent;
	}

	.select-icon.selected {
		background: #ff6b6b;
		border-color: #ff6b6b;
		color: white;
	}

	.item-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.item-desc {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 20rpx;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-price {
		font-size: 28rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 25rpx;
		padding: 5rpx;
	}

	.quantity-btn {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 30rpx;
		color: #666;
	}

	.quantity-number {
		min-width: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}

	.item-delete {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		background: #ff4757;
		color: white;
		padding: 15rpx 25rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
	}

	/* 推荐商品样式 */
	.recommended-section {
		padding: 20rpx;
		background-color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}

	.section-title {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		margin-left: 200rpx;
	}

	.recommended-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	/* 瀑布流布局调整 */
	.recommended-item {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-bottom: 20rpx;
		padding: 0rpx;
		border: 1rpx solid #999;
		border-radius: 20rpx;
	}

	.recommended-image {
		width: 100%;
		height: 180rpx;
		border-radius: 8rpx;
		margin-bottom: 15rpx;
	}

	.recommended-name {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.recommended-price {
		display: block;
		font-size: 28rpx;
		color: #ff6b6b;
		font-weight: bold;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
	}

	.add-to-cart-btn {
		width: 80%;
		background-color: #ff6b6b;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 10rpx 0;
		font-size: 24rpx;
	}

	/* 空购物车 */
	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.empty-btn {
		background: #ff6b6b;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 60rpx;
		font-size: 28rpx;
	}

	/* 购物车底部 */
	.cart-footer {
		position: fixed;
		/* #ifdef H5 */
			bottom: 100rpx;
		/* #endif */
		/* #ifdef APP */
			bottom: 10rpx;
		/* #endif */
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		border-top: 1rpx solid #eee;
		padding: 20rpx 30rpx;
		height: 80rpx;
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.select-all {
		display: flex;
		align-items: center;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 15rpx;
	}

	.footer-right {
		display: flex;
		align-items: center;
	}

	.total-info {
		margin-right: 30rpx;
	}

	.total-text {
		font-size: 26rpx;
		color: #666;
	}

	.total-price {
		font-size: 32rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.submit-btn {
		background: #ff6b6b;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 8rpx 40rpx;
		font-size: 28rpx;
	}
</style>